<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>骡窝日报详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="js/bootstrap/css/bootstrap.min.css">
    <script src="js/jquery/jquery.min.js"></script>
    <script src="js/bootstrap/js/bootstrap.bundle.min.js"></script>

    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/newsContent.css">
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/plugins/eleditor/Eleditor.min.js"></script>
    <script src="/js/plugins/eleditor/webuploader.min.js"></script>

</head>

<body>
<div class="newsDetail">
    <div class="search-head">
        <div class="row nav-search">
            <div class="col">
                <a href="javascript:history.go(-1);">
                    <span><i class="fa fa-chevron-left"></i></span>
                </a>
            </div>
            <div class="col">
            </div>
        </div>
    </div>
    <div id="daily">
        <img render-src="list.coverUrl">
        <div class="container">
            <div class="row typeRow">
                <div class="col-4">
                    <span class="type" render-html="list.type.name">美图美文</span>
                </div>
                <div class="col-2">
                </div>
                <div class="col-2">
                    <span>By</span>
                </div>
                <div class="col-4">
                    <span class="type">骡窝官方</span>
                </div>
            </div>

            <div class="detail">
                <h2 class="title" render-html="list.title">名人眼中旅行的意义</h2>
                <div class="content" render-html="list.content">
                    <p>旅游的作用就是用现实来约束想像：不是去想事情会是怎样的，而是去看它们实际上是怎样的。</p>
                    <p>&nbsp;——约翰逊（<span class="link">
                        <a href="/travel-scenic-spot/mafengwo/10062.html" target="_blank">美国</a>
                        </span>第36任总统）
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!--点赞收藏评论-->
    <div class="container d-flex">
        <div class="p-2  flex-fill">
            <i class="fa fa-thumbs-o-up"  id="likeBtn"> </i>
        </div>
        <div class="p-2  flex-fill"><i class="fa  fa-commenting-o" id="commentBtn"> </i>
        </div>
        <div class="p-2  flex-fill"><i class="fa fa-star-o" id="collectBtn"> </i>
        </div>
    </div>

    <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=1)" width="80%" color=#987cb9 SIZE=3>

    <div id="comments">
        <div render-loop="list">

            <div class="container row comment">
                <div class="col-2 comment-head">
                    <a href="userProfiles.html">
                        <img class="rounded-circle"
                             render-src="list.user.headImgUrl"  width="32" height="32">
                    </a>
                </div>
                <div class="col comment-right">
                    <p class="authorName"><span render-html="list.user.nickName">dafei</span></p>
                    <span class="comment-date" render-html="list.createTime">2018-07-19</span>
                    <div class="comment-content">
                        <a href="strategyComment.html">
                            <p render-html="list.content">我觉得很好</p>
                        </a>
                    </div>

                    <ul class="comment-img">
                        <li>
                            <img render-src="list.imgUrls">
                        </li>
                    </ul>

                </div>
            </div>
        </div>

    </div>
    </div>
</div>

<script>
    $(function () {
        //获取文章内容
        var params = getParams();
        if (params.id) {
            $.get("/daily", {id: params.id}, function (data) {
                //进行数据的渲染
                console.log(data);
                $("#daily").renderValues({list: data});
            });
        }

        //获取当前文章的评价
        $.get("/daily/comments",{dailyId: params.id},function (data) {
            if(data){
                $("#comments").renderValues({list: data});
            }
        });

        $("#commentBtn").click(function () {
            var user=sessionStorage.getItem("user");
            if(user){
                location.href="/dailyComment.html?id="+params.id;
            }else {
                location.href="/login.html";
            }
        });
        //保存点赞收藏数据
        $("#praise").click(function () {
            console.log(1);
            $.post("/daily/comments",{id:params.id},function () {
            });
        });
<!--begin......................................................................-->
        //点击收藏
        var user = sessionStorage.getItem("user");
        var collect = 0;
        $("#collectBtn").click(function () {
            if(user){
                if (collect == 0) {
                    $("#collectBtn").css({"color": "red"});
                    collect = 1;
                    $.post("/collect", {dailyId: getParams().id});
                } else if (collect == 1) {
                    $("#collectBtn").attr("style", "");
                    collect = 0;
                    $.post("/collect", {dailyId: getParams().id});
                }
            }else {
                location.href = "/login.html";
            }
        });

        if(user){
            //发送请求进行收藏回显
            $.get("/collect/select", {dailyId: getParams().id}, function (data) {
                if (data.success) {
                    $("#collectBtn").css({"color": "red"});
                    collect=1;
                } else {
                    $("#collectBtn").attr("style", "");
                }
            })
        }
<!--end........................................................................-->

<!--begin......................................................................-->
        //点赞
        var praise = 0;
        $("#likeBtn").click(function () {
            if(user){
                if (praise == 0) {
                    $("#likeBtn").css({"color": "red"});
                    praise = 1;
                } else if (praise == 1) {
                    $("#likeBtn").attr("style", "");
                    praise = 0;
                }
            }
        });
    });
<!--end......................................................................-->
</script>

</body>
</html>